<template>
  <el-row>
    <menu-create-modal ref="menuCreateModal" :menuData="menuData" :pId="pid" :objectId="id" @refresh="setRefresh"></menu-create-modal>
    <el-col :span="24">
      <el-card class="search-form">
        <el-form ref="searchForm" class="el-form-col" :model="search" label-width="106px" label-position="left">
          <el-row :gutter="15">
            <el-col :span="6">
              <el-form-item label="搜索仓库:" prop="name">
                <el-input v-model="search.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <!--<el-button type="success" :loading="searchLoading" plain  @click.prevent="searchFunc(search)">搜索</el-button>-->
              <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
            </el-col>
            <el-col :span="2">
              <el-button @click.prevent="resetFields">重置
              </el-button>
            </el-col>
            <!--<div class="col-xs-1 col-sm-1">-->
            <!--<button-->
            <!--class="btn btn-block btn-circle white font-green btn-boxShow"-->
            <!--@click.prevent="searchOpen = !searchOpen">-->
            <!--{{ searchOpen ? '收起' : '高级搜索' }}-->
            <!--</button>-->
            <!--</div>-->
          </el-row>
        </el-form>
      </el-card>
    </el-col>
    <el-col :span="24">
      <Portlet title="仓库库位">
        <div slot="tools">
          <!--<el-button type="primary" @click.prevent="createRoot">添加根库位</el-button>-->
        </div>
        <el-tree
          :data="menuData"
          :expand-on-click-node="false"
          :filter-node-method="filterNodeMethod"
          :props="{
              label: 'name'
            }"
          draggable
          ref="elTree"
          node-key="id">
          <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ data.text }}</span>
              <span>
                <el-button
                  type="text"
                  size="mini"
                  @click.prevent="setCreate(data)"
                >
                  添加
                </el-button>
              </span>
            </span>
        </el-tree>
      </Portlet>
    </el-col>
  </el-row>
</template>
<script>
import {dotData, alert, confirm, arrayToTree} from '@/utils'
import menuCreateModal from '@/views/oms/warehouse/configuration/MenuCreateModal'
export default {
  components: {
    menuCreateModal
  },
  data() {
    return {
      searchLoading: false,
      id: this.$route.params.id,
      menuData: [],
      data: [],
      pid: '',
      search: {
        name: ''
      }
    }
  },
  created() {
    // 获取菜单数据
    this.httpGet()
  },
  methods: {
    httpGet() {
      this.$ajax.get('/ms-warehouse-order/sorting-maintenance/query-list-warehouse', {werahouseId: this.id}).then(response => {
        const success = dotData(response, 'success')
        if (success) {
          const data = dotData(response, 'data')
          if (Array.isArray(data)) {
            let temp = []
            data.forEach(v => {
              temp.push({
                id: v.id,
                value: v.id,
                text: v.storageRegionName,
                pid: v.pId,
                data: v
              })
            })
            this.menuData = arrayToTree(temp, 'value', 'pid', 'children', '0', true) || []
          }
        }
      })
    },
    // 编辑
    setEdit(id) {
      this.pid = ''
      this.$refs.menuCreateModal.show(id)
    },
    // 刷新数据
    setRefresh() {
      this.httpGet()
    },
    // 创建库位
    setCreate(data) {
      this.pid = data.value || 0
      this.$refs.menuCreateModal.show()
    },
    // 创建根库位
    createRoot() {
      this.setCreate('0')
    },
    setMenuData(arr) {
      this.menuData = arr
    },
    // 删除
    setDel(node) {
      const children = dotData(node, 'children')
      if (children.length > 0) {
        alert('此库位还有下级库位，请先删除下级库位后才能删除')
        return
      }
      const id = dotData(node, 'data.id')
      confirm('<p>是否确认删除？</p>', '删除库位', {
        confirmButtonLoading: true,
        type: 'success',
        dangerouslyUseHTMLString: true,
        confirmCallBack: ({confirmButtonLoadingClose, close}) => {
          return this.$ajax.get('/ms-warehouse-order/ch-warehouse-manager/deleteRegion', {id: id}).then(response => {
            if (response.success) {
              close().then(_ => {
                this.setRefresh()
                confirm('删除成功')
              })
            }
          }).finally(_ => {
            confirmButtonLoadingClose()
          })
        }
      })
    },
    // 重置表单
    resetFields() {
      const searchForm = this.$refs.searchForm
      if (searchForm) {
        searchForm.resetFields()
      }
    },
    // 搜索
    searchFunc(search) {
      const treeNode = this.$refs.elTree
      if (treeNode) {
        treeNode.filter(search.name)
      }
    },
    filterNodeMethod(value, data, node) {
      if (data.text) {
        return data.text.indexOf(value) >= 0
      }
      return false
    }
  }
}
</script>
